<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="renderer" content="webkit" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <!-- <meta name="referrer" content="no-referrer"/> --> 
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <title>Jquery+CSS3实现网页入场动画特效 - 米虫 - 做一个有理想的米虫 - www.mebugs.com</title> 
  <meta name="expires" content="Mon, 09 Apr 2999 09:09:09 GMT" /> 
  <meta name="description" content="多数网站首页的数据往往是最庞大的，三到五秒打开都算比较优秀，因此设置一个开场（预加载）动画特效能够大幅度提升用户感官体验，这里分享本站使用的加载动画，整体比较简约清新 - 米虫 - 做一个有理想的米虫 - www.mebugs.com" /> 
  <meta name="keywords" content="米虫,程序员,博客,学习,工作,物联网,IT,经验,总结,分享,Java,Go,Linux,前端,数据库" /> 
  <link rel="icon" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link rel="shortcut icon" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link rel="apple-touch-icon-precomposed" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link href="http://blog.mebugs.com/static/css/load.css?v=1.0" rel="stylesheet" type="text/css" />
  <link href="http://blog.mebugs.com/static/css/base.css?v=1.0" rel="stylesheet" type="text/css" />
      <link href="http://blog.mebugs.com/static/css/post.css?v=1.0" rel="stylesheet" type="text/css" />
  <link href="http://blog.mebugs.com/static/css/coms.css?v=1.0" rel="stylesheet" type="text/css" /> 
  <link href="http://blog.mebugs.com/static/css/marked/marked.css?v=1.0" rel="stylesheet" type="text/css" /> 
            <link href="http://blog.mebugs.com/static/css/mobile/base.css?v=1.0" rel="stylesheet" type="text/css" media="screen and (max-device-width:1200px)" /> 
    <!-- 谷歌广告 -->
  <script data-ad-client="ca-pub-2699978133125218" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 </head> 
 <body> 
 <div class="loader" id="loader">
   <div class="load">
     <hr/><hr/><hr/><hr/>
   </div>
 </div>
  <header> 
   <div class="w"> 
    <a class="logo" href="/"></a> 
    <div class="menu"> 
     <a  href="/">首页</a> 
     <a class="mck" href="/posts/new_1.html">文章</a> 
     <a  href="/category/list_1.html">分类</a> 
     <a  href="/tag/list_1.html">标签</a> 
     <a  href="/page/about.html">关于</a> 
     <a  href="/page/link.html">友链</a> 
     <a  href="/page/msg.html">留言</a> 
     <a  href="/page/map.html">地图</a> 
    </div> 
    <div class="temp" onclick="setShow()"></div><div class="mobim" onclick="setMbm()"><ul><li></li><li></li><li></li></ul></div> 
        <div class="pomenu" onclick="doPmenu(true)"><div class="mmenu" id="pomenu" ><ul><li>‹</li><li></li><li>›</li></ul></div></div>
       </div> 
  </header>  <!-- POST TOP -->
  <div class="r rt"> 
   <div class="w tb_15"> 
    <div class="c c_12 pst"> 
     <div class="pt pct rtl"> 
      <h1>Jquery+CSS3实现网页入场动画特效</h1> 
     </div> 
     <div class="pdest rtr">多数网站首页的数据往往是最庞大的，三到五秒打开都算比较优秀，因此设置一个开场（预加载）动画特效能够大幅度提升用户感官体验，这里分享本站使用的加载动画，整体比较简约清新</div> 
    </div> 
   </div> 
  </div> 
  <div class="r"> 
   <div class="w tb_15"> 
    <div class="c c_3 prel"> 
     <div class="menue" id="menue"><ul><li><a href="javascript:runTo('menu_1')" class="pl1">关于预加载动画</a> <!----></li><li><a href="javascript:runTo('menu_2')" class="pl1">引入Jquery</a> <!----></li><li><a href="javascript:runTo('menu_3')" class="pl1">实现思路</a> <ul><li><a href="javascript:runTo('menu_4')" class="pl2">定义preloading.css</a> <!----></li><li><a href="javascript:runTo('menu_5')" class="pl2">引入CSS文件</a> <!----></li><li><a href="javascript:runTo('menu_6')" class="pl2">定义元素并应用</a> <!----></li></ul></li></ul></div> 
    </div> 
    <div class="c c_9">
     <!-- post banner info -->
     <div class="mban"> 
      <img src="http://blog.mebugs.com/static/upload/banner/1646008724670.jpg" /> 
            <div class="pfro">
        <p>
          <span>所属分类</span>
          <b class="pta"><a href="/category/web_1.html">WEB</a> </b>
        </p>
        <p>
          <span>相关标签</span>
          <b class="pta"><a href="/tag/css_1.html">CSS</a><a href="/tag/load_1.html">加载</a><a href="/tag/animo_1.html">动画</a></b>
        </p>
      </div>
           </div>
     <!-- post content -->
     <div id="html" class="output mark"><h1 id="menu_1">关于预加载动画</h1><p>网站首页增加一个预加载动画，让用户首次访问网站的时候不会因为等待资源准备时间过长而感到枯燥。</p>
<p>CSS3的动画效果利用的是keyframes帧动画能力，可以理解为纯代码实现了界面的动画效果。</p>
<p>以前很多人会使用一个动态的图片作为预加载动画，效果很酷。</p>
<p>不过gif的图片相对而言会比较大一点，如果想展现更加优秀的动画效果，就需要精细的图片+更多的帧。</p>
<p>制作一个动态的gif本身并不困难，不太好的地方在于不能够随意更换以及自定义色彩。</p>
<p>因此，使用Jquery+CSS3+HTML一个新的方案来替代图片是一个比较好的解决方案。</p>
<h1 id="menu_2">引入Jquery</h1><p>99%的网站一般都会引入Jquery库，通过Chrome内核的浏览器，右击查看网站源代码。</p>
<p>Ctrl+F调出搜索框，输入Jquery，检查您的网站是否引入了Jquery库。</p>
<p>如果没有，您需要考虑使用原生JS代码实现class的移除等。</p>
<p>这里为了让案例简洁，直接使用Jquery库来实现。（利用原生JS也可以实现）</p>
<h1 id="menu_3">实现思路</h1><ol>
<li>打开页面在默认显示加载的动画元素（因此动画元素应当浮在所有内容的上方并盖住其他内容）</li>
<li>JS判断页面DOM是否Load完成（$(window).load 和 $(document).ready 都可以使用，虽然有差别，整体感知不明显）</li>
<li>Load完成后对动画元素隐藏即可</li>
</ol>
<h2 id="menu_4">定义preloading.css</h2><p>由于CSS中的特效定义比较多，解释起来比较麻烦。</p>
<p>感兴趣可以学习一些CSS3的线性动画特性。</p>
<pre><code class="hljs language-css"><span class="hljs-selector-class">.loader</span>{
    <span class="hljs-attribute">position</span>:fixed;
    <span class="hljs-attribute">left</span>:<span class="hljs-number">50%</span>;
    <span class="hljs-attribute">top</span>:<span class="hljs-number">50%</span>;
    <span class="hljs-attribute">margin</span>:-<span class="hljs-number">0.2em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> -<span class="hljs-number">0.2em</span>;
    <span class="hljs-attribute">text-indent</span>:-<span class="hljs-number">9999em</span>;
    <span class="hljs-attribute">border-top</span>:.<span class="hljs-number">3em</span> solid <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.1</span>);
    <span class="hljs-attribute">border-right</span>:.<span class="hljs-number">3em</span> solid <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.1</span>);
    <span class="hljs-attribute">border-bottom</span>:.<span class="hljs-number">3em</span> solid <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.1</span>);
    <span class="hljs-attribute">border-left</span>:.<span class="hljs-number">3em</span> solid <span class="hljs-number">#9cc</span>;
    <span class="hljs-comment">/* 篇幅原因省略了一些兼容性CSS配置 */</span>
    <span class="hljs-attribute">transform</span>:<span class="hljs-built_in">translateZ</span>(<span class="hljs-number">0</span>);
    <span class="hljs-comment">/* 关键CSS：关联对应的动画配置loader ，篇幅原因省略了一些兼容性CSS配置 */</span>
    <span class="hljs-attribute">animation</span>:loader .<span class="hljs-number">5s</span> infinite linear;
    <span class="hljs-attribute">z-index</span>:<span class="hljs-number">999</span>;
}
<span class="hljs-selector-class">.loader</span>,<span class="hljs-selector-class">.loader</span>:after{
    border-radius:<span class="hljs-number">50%</span>;<span class="hljs-attribute">width</span>:<span class="hljs-number">2em</span>;<span class="hljs-attribute">height</span>:<span class="hljs-number">2em</span>
}
<span class="hljs-selector-class">.curtain</span>{
    <span class="hljs-attribute">position</span>:fixed;
    <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">background-color</span>:white;
    <span class="hljs-attribute">filter</span>:<span class="hljs-built_in">alpha</span>(opacity=<span class="hljs-number">0</span>);
    <span class="hljs-attribute">opacity</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">z-index</span>:<span class="hljs-number">0</span>
}
<span class="hljs-selector-class">.sending</span> <span class="hljs-selector-class">.curtain</span>{
    <span class="hljs-attribute">top</span>:<span class="hljs-number">0px</span>;
}
<span class="hljs-comment">/* 动画配置loader，篇幅原因省略了一些兼容性CSS配置 */</span>
<span class="hljs-keyword">@keyframes</span> loader{
    <span class="hljs-number">0%</span>{
        -webkit-<span class="hljs-attribute">transform</span>:<span class="hljs-built_in">rotate</span>(<span class="hljs-number">0deg</span>);
        <span class="hljs-attribute">transform</span>:<span class="hljs-built_in">rotate</span>(<span class="hljs-number">0deg</span>);
    }
    <span class="hljs-number">100%</span>{
        -webkit-<span class="hljs-attribute">transform</span>:<span class="hljs-built_in">rotate</span>(<span class="hljs-number">360deg</span>);
        <span class="hljs-attribute">transform</span>:<span class="hljs-built_in">rotate</span>(<span class="hljs-number">360deg</span>);
    }
}
<span class="hljs-selector-class">.is-loading</span> <span class="hljs-selector-class">.loader</span>,<span class="hljs-selector-class">.is-loading</span> <span class="hljs-selector-class">.curtain</span>
{
    <span class="hljs-attribute">filter</span>:progid:DXImageTransform.Microsoft.<span class="hljs-built_in">Alpha</span>(enabled=false);
    <span class="hljs-attribute">opacity</span>:<span class="hljs-number">1</span>
}
<span class="hljs-selector-class">.is-loading</span> <span class="hljs-selector-class">.curtain</span>{
    <span class="hljs-attribute">z-index</span>:<span class="hljs-number">999</span>
}
<span class="hljs-comment">/* 自定义滚动条样式，可有可无 */</span>
::-webkit-scrollbar
{
    width:<span class="hljs-number">12px</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">12px</span>;
}
::-webkit-scrollbar-thumb
{
    border-radius:<span class="hljs-number">2px</span>;
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#99cccc</span>;
    <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">-webkit-linear-gradient</span>(<span class="hljs-number">45deg</span>,<span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,.<span class="hljs-number">2</span>) <span class="hljs-number">25%</span>,transparent <span class="hljs-number">25%</span>,transparent <span class="hljs-number">50%</span>,<span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,.<span class="hljs-number">2</span>) <span class="hljs-number">50%</span>,<span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,<span class="hljs-number">255</span>,.<span class="hljs-number">2</span>) <span class="hljs-number">75%</span>,transparent <span class="hljs-number">75%</span>,transparent);
}
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">6px</span> <span class="hljs-number">#ddd</span>;
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#fbfbfb</span>;
    <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">2px</span>;
}
</code></pre>
<h2 id="menu_5">引入CSS文件</h2><p>放在head便签区域内的最下方（尽量优先加载）。</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;css/preloading.css&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
</code></pre>
<h2 id="menu_6">定义元素并应用</h2><p>放在body区域最上方，主要便于浮动时可以盖住其他元素。</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;is-loading&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;load&quot;</span>&gt;</span> 
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;curtain&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;loader&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript">
<span class="hljs-comment">//确保Jquey已加载后执行进入 </span>
(<span class="hljs-keyword">function</span>(<span class="hljs-params">$</span>){
    <span class="hljs-comment">//$(window).load 和 $(document).ready 都可以使用，虽然有差别，整体感知不明显</span>
    $(<span class="hljs-variable language_">window</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">&quot;load&quot;</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { 
        <span class="hljs-variable language_">window</span>.<span class="hljs-built_in">setTimeout</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
            <span class="hljs-comment">//隐藏或者移除Class均可以使用</span>
            <span class="hljs-comment">//推荐用CSS特性实现 </span>
            <span class="hljs-comment">//$(&quot;#load&quot;).removeClass(&quot;is-loading&quot;);</span>
            $(<span class="hljs-string">&quot;#load&quot;</span>).<span class="hljs-title function_">hide</span>(<span class="hljs-number">500</span>);
        }, <span class="hljs-number">100</span>);
    });
})(jQuery);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
</div>
     <!-- author -->
     <div class="row">
      <div class="authors">
       <div class="mea"> 
        <img class="meavt" src="/static/img/me_avator.jpg" /> 
        <div class="meainfo">
            <h1>米虫</h1>
            <p>做一个有理想的米虫，伪全栈程序猿，乐观主义者，坚信一切都是最好的安排！</p> 
            <div class="meconn">
             <a href="http://wpa.qq.com/msgrd?v=3&uin=7431346&site=qq&menu=yes" target="_blank" class="conn cqq"></a>
             <a href="mailto:iam@qiantaoyuan.com" target="_blank" class="conn cml"></a> 
             <a href="https://gitee.com/mebugs" target="_blank" class="conn cge"></a> 
             <a href="https://github.com/mebugs" target="_blank" class="conn cgb"></a>
            </div> 
           </div> 
       </div>
       <div class="mecpr">
        <p>本站由个人原创、收集或整理，如涉及侵权请联系删除</p>
        <p>本站内容支持转发，希望贵方携带转载信息和原文链接</p>
        <p>本站具有时效性，不提供有效、可用和准确等相关保证</p>
        <p>本站不提供免费技术支持，暂不推荐您使用案例商业化</p>
       </div>
      </div>
     </div>
    </div>
    <div class="c c_12" id="mother"> 
          <!-- comms form -->
     <div class="row">
      <div class="pt"> <h1>发表观点</h1> <a class="mr" href="javascript:helpComms()">提示</a> </div> 
      <div class="box"> 
       <div class="comme"> 
        <div class="namee"> 
         <div class="navt" onclick="chooseAvt()"><img id="avt" src="/static/upload/avtor/1.jpg" /><p class="bgl">选择头像</p></div> 
         <div class="nxinfo"> 
          <div class="nipt"><p>昵称</p><input id="name" type="text" placeholder="*必填,请输入您的昵称" /></div> 
          <div class="nipt"><p>邮箱</p><input id="email" type="text" placeholder="推荐选填,请输入您的电子邮箱" /></div> 
          <div class="nipt"><p>QQ</p><input id="qq" type="text" placeholder="选填,请输入您的联系QQ" /></div> 
          <div class="nipt"><p>网址</p><input id="url" type="text" placeholder="选填,请输入您的个人主页地址" /></div> 
         </div> 
        </div> 
        <div class="ctxe"><textarea id="coms" name="coms" placeholder="*必填,请输入您的精彩观点"></textarea></div> 
        <div class="sendc"><a class="bgl" href="javascript:sendComms(1032,1,0)">提交观点</a></div> 
       </div>
      </div> 
     </div>
     <!-- comms eare -->
     <div class="row">
      <div class="commi">
      <p>当前还没有观点发布，欢迎您留下足迹！</p>      </div>
           </div> 
          <!-- sml imgs -->
     <div class="row">
      <div class="box"> 
       <div class="mequc indimg">
        <div class="mequci"><a href="/category/open_1.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264859337.png" /></a></div> <div class="mequci"><a href="/page/msg.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264883629.jpg" /></a></div> <div class="mequci"><a href="/page/link.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264902496.jpg" /></a></div> <div class="mequci"><a href="/page/map.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264913873.jpg" /></a></div>        </div> 
      </div> 
     </div>
          <!-- like post -->
     <div class="row">
      <div class="pt"> 
       <h1>同类其他</h1>
       <a class="mr" href="/category/web_1.html">WEB</a>      </div> 
      <div class="box pm pa_4"> 
                  <a href="/post/bindqb.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646185715696.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>Jquery中bind()、live()、delegate()和on()的区别</h2> 
         <p class="pdesc">自Jquery1.7起，on()方法是 bind()、live()、delegate() 方法的新的替代品，我们推荐使用on()来处理业务中的事件绑定，通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在</p> 
        </div> 
      </a> 
            <a href="/post/nvmnjs.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646874318085.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>nvm管理node.js和npm多版本切换</h2> 
         <p class="pdesc">在业务中我们会出现不同的项目依赖与不同版本的 node.js，总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖，使用 nvm 可以让多个版本的 node.js 共存，并提供管理和切换</p> 
        </div> 
      </a> 
            <a href="/post/jcheadh.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646010594005.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>Jquery+CSS轻松实现导航动态显示隐藏</h2> 
         <p class="pdesc">绝大多数网站都会有个顶部导航，对于手机端而言为了便于访问导航常常会做固顶操作，通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法，可以轻松实现下滑隐藏，上滑显示的效果</p> 
        </div> 
      </a> 
            <a href="/post/zsycsshtml.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646128839253.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>前端多终端自适应网页开发模式</h2> 
         <p class="pdesc">智能移动终端大爆发的现阶段，手机访问网页已经成为人们不可或缺的使用习惯，开发自适应网页大势所趋，实际上无论改造还是开发本身并不复杂，但是掌握更好的开发模式会使得你编写页面更加高效快捷</p> 
        </div> 
      </a> 
            <a href="/post/upspeed.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1645059069074.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>instantclick.js预加载实现网页秒开</h2> 
         <p class="pdesc">instantclick.js利用预加载技术使得网站页面跳转时的速度得到大大提升，通过预加载数据替换当前的DOM结构体来达到减少页面请求返回的数据量，提供事件监听钩子函数便于完成页面初始化</p> 
        </div> 
      </a> 
            <a href="/post/gradc.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1645013231825.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>CSS3通过Gradients实现渐变背景色</h2> 
         <p class="pdesc">使用背景色渐变可以使得页面质感得到大幅度提升，CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡，由于颜色的渐变是由浏览器生成，因此不会出现不同分辨率下失真的情况。</p> 
        </div> 
      </a> 
            </div>
     </div>
         </div>
    <!-- more post new hot rand -->
    <div class="c c_4">
     <!-- new -->
     <div class="row"> 
      <div class="pt"><h1>新鲜发布</h1><a class="mr" href="/posts/new_1.html">更多</a></div> 
            <div class="box lm"> 
              <a href="/post/nvmnjs.html">  
        <div class="pimel ltop bgl">1</div> 
        <div class="pinfr"><h2>nvm管理node.js和npm多版本切换</h2></div> 
       </a>
              <a href="/post/bsonon.html">  
        <div class="pimel ltop bgl">2</div> 
        <div class="pinfr"><h2>BSON数据结构以及与JSON区别</h2></div> 
       </a>
              <a href="/post/endeco.html">  
        <div class="pimel ltop bgl">3</div> 
        <div class="pinfr"><h2>可逆（对称和非对称）与不可逆加密算法</h2></div> 
       </a>
              <a href="/post/gointfc.html">  
        <div class="pimel ltop bgl">4</div> 
        <div class="pinfr"><h2>Go中接口的设计与实现</h2></div> 
       </a>
              <a href="/post/locklock.html">  
        <div class="pimel ltop bgl">5</div> 
        <div class="pinfr"><h2>计算机中的乐观锁与悲观锁</h2></div> 
       </a>
              <a href="/post/soapjvm.html">  
        <div class="pimel ltop bgl">6</div> 
        <div class="pinfr"><h2>SoapUI启动报错The JVM could not be started</h2></div> 
       </a>
              <a href="/post/orajob.html">  
        <div class="pimel ltop bgl">7</div> 
        <div class="pinfr"><h2>Orcale定时任务管理dbms_job</h2></div> 
       </a>
              <a href="/post/mebugs.html">  
        <div class="pimel ltop bgl">8</div> 
        <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
       </a>
              <a href="/post/meals.html">  
        <div class="pimel ltop bgl">9</div> 
        <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
       </a>
              <a href="/post/meal.html">  
        <div class="pimel ltop bgl">10</div> 
        <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
       </a>
             </div> 
     </div>  
    </div>
    <div class="c c_4">
      <!-- new -->
      <div class="row"> 
       <div class="pt"><h1>近期飙升</h1><a class="mr" href="/posts/up_1.html">更多</a></div> 
              <div class="box lm"> 
                <a href="/post/mebugs.html">  
         <div class="pimel ltop bgl">1</div> 
         <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
        </a>
                <a href="/post/smvcdata.html">  
         <div class="pimel ltop bgl">2</div> 
         <div class="pinfr"><h2>一文理解SpringMVC框架核心</h2></div> 
        </a>
                <a href="/post/holdgbean.html">  
         <div class="pimel ltop bgl">3</div> 
         <div class="pinfr"><h2>SpringContextHolder工具类自由获取Bean</h2></div> 
        </a>
                <a href="/post/slideres.html">  
         <div class="pimel ltop bgl">4</div> 
         <div class="pinfr"><h2>侧边栏下滑即将越过时动态固顶与上滑恢复</h2></div> 
        </a>
                <a href="/post/ctrfctmod.html">  
         <div class="pimel ltop bgl">5</div> 
         <div class="pinfr"><h2>JAVA设计模式之创建者模式中的三种工厂模式</h2></div> 
        </a>
                <a href="/post/meals.html">  
         <div class="pimel ltop bgl">6</div> 
         <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
        </a>
                <a href="/post/oraclelilog.html">  
         <div class="pimel ltop bgl">7</div> 
         <div class="pinfr"><h2>Linux下Oracle数据库配置日志目录及统一迁移</h2></div> 
        </a>
                <a href="/post/getpramnoc.html">  
         <div class="pimel ltop bgl">8</div> 
         <div class="pinfr"><h2>JAVA服务端GET请求URL中文参数乱码</h2></div> 
        </a>
                <a href="/post/meal.html">  
         <div class="pimel ltop bgl">9</div> 
         <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
        </a>
                <a href="/post/sqlcashw.html">  
         <div class="pimel ltop bgl">10</div> 
         <div class="pinfr"><h2>SQL通过CASE WHEN语句实现条件返回</h2></div> 
        </a>
               </div> 
      </div>  
    </div>
    <div class="c c_4">
      <!-- new -->
      <div class="row"> 
       <div class="pt"><h1>随便看看</h1><a class="mr" href="/posts/rand_1.html">更多</a></div> 
              <div class="box lm"> 
                <a href="/post/nvmnjs.html">  
         <div class="pimel ltop bgl">1</div> 
         <div class="pinfr"><h2>nvm管理node.js和npm多版本切换</h2></div> 
        </a>
                <a href="/post/bsonon.html">  
         <div class="pimel ltop bgl">2</div> 
         <div class="pinfr"><h2>BSON数据结构以及与JSON区别</h2></div> 
        </a>
                <a href="/post/endeco.html">  
         <div class="pimel ltop bgl">3</div> 
         <div class="pinfr"><h2>可逆（对称和非对称）与不可逆加密算法</h2></div> 
        </a>
                <a href="/post/gointfc.html">  
         <div class="pimel ltop bgl">4</div> 
         <div class="pinfr"><h2>Go中接口的设计与实现</h2></div> 
        </a>
                <a href="/post/locklock.html">  
         <div class="pimel ltop bgl">5</div> 
         <div class="pinfr"><h2>计算机中的乐观锁与悲观锁</h2></div> 
        </a>
                <a href="/post/soapjvm.html">  
         <div class="pimel ltop bgl">6</div> 
         <div class="pinfr"><h2>SoapUI启动报错The JVM could not be started</h2></div> 
        </a>
                <a href="/post/orajob.html">  
         <div class="pimel ltop bgl">7</div> 
         <div class="pinfr"><h2>Orcale定时任务管理dbms_job</h2></div> 
        </a>
                <a href="/post/mebugs.html">  
         <div class="pimel ltop bgl">8</div> 
         <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
        </a>
                <a href="/post/meals.html">  
         <div class="pimel ltop bgl">9</div> 
         <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
        </a>
                <a href="/post/meal.html">  
         <div class="pimel ltop bgl">10</div> 
         <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
        </a>
               </div> 
      </div>  
    </div>
   </div>
  </div> 
  <footer> 
   <div class="w"> 
    <div class="c c_6"> 
     <div class="ft fl"> 
      <div class="pt pct">
       <h1>快捷分类</h1> 
      </div>
      <p>
        <a href="/posts/best_1.html">好文荐读</a>
        <a href="/posts/hot_1.html">全站热门</a>
        <a href="/posts/new_1.html">最新发布</a>
        <a href="/posts/up_1.html">近期飙升</a>
        <a href="/posts/rand_1.html">今日随选</a>
      <a href="/category/java_1.html">JAVA</a><a href="/category/web_1.html">WEB</a><a href="/category/db_1.html">数据库</a><a href="/category/linux_1.html">Linux</a><a href="/category/tool_1.html">工具</a><a href="/category/well_1.html">运维</a><a href="/category/php_1.html">PHP</a><a href="/category/app_1.html">移动端</a><a href="/category/plat_1.html">架构</a><a href="/category/open_1.html">开源</a><a href="/category/go_1.html">Golang</a><a href="/category/conn_1.html">概念</a><a href="/category/run_1.html">数据</a><a href="/category/net_1.html">中间件</a><a href="/category/security_1.html">安全</a><a href="/category/box_1.html">杂谈</a>      </p>
     </div> 
    </div>
    <div class="c c_6"> 
     <div class="ft fr"> 
      <div class="pt pct">
       <h1>热点标签</h1> 
      </div>
      <p> 
      <a href="/tag/css_1.html">CSS</a><a href="/tag/jquery_1.html">JQuery</a><a href="/tag/oracle_1.html">Oracle</a><a href="/tag/method_1.html">方法</a><a href="/tag/dismod_1.html">设计</a><a href="/tag/factory_1.html">工厂</a><a href="/tag/scripts_1.html">脚本</a><a href="/tag/confx_1.html">配置</a><a href="/tag/sql_1.html">SQL</a><a href="/tag/conn_1.html">连接</a><a href="/tag/windows_1.html">Windows</a><a href="/tag/spring_1.html">Spring</a><a href="/tag/springboot_1.html">SpringBoot</a><a href="/tag/mvc_1.html">MVC</a><a href="/tag/request_1.html">请求</a><a href="/tag/git_1.html">Git</a><a href="/tag/object_1.html">对象</a><a href="/tag/disk_1.html">磁盘</a><a href="/tag/tasks_1.html">任务</a><a href="/tag/load_1.html">加载</a><a href="/tag/password_1.html">密码</a><a href="/tag/header_1.html">导航</a><a href="/tag/log_1.html">日志</a><a href="/tag/datas_1.html">数据</a><a href="/tag/crete_1.html">创建</a><a href="/tag/morff_1.html">高并发</a><a href="/tag/maven_1.html">Maven</a><a href="/tag/ift_1.html">条件</a><a href="/tag/vers_1.html">版本</a><a href="/tag/springmvc_1.html">SpringMVC</a>      </p>
     </div> 
    </div> 
    <div class="c c_12"> 
     <div class="fu"> 
      <p>米虫<em>[独立博客]</em> 丨 <a href="/">www.mebugs.com</a> 丨 <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备20039109号</a>丨 做一个有理想的米虫</p> 
      <p><a href="/page/about.html">关于</a> 丨 <a href="/page/msg.html">留言</a> 丨 <a href="/page/link.html">友链</a> 丨 <a href="/page/map.html">地图</a></p> 
     </div> 
    </div> 
   </div> 
  </footer> 
  <div class="back_top" onclick="backTop()"> </div> 
   
  <div class="rzz" id="cavt">
    <div class="rea cave box">
      <div class="reat">
        <h1>选择个人头像</h1>
      </div>
      <div class="avts">
        <img src="/static/upload/avtor/1.jpg" onclick="setAvt(this,1)" />
        <img src="/static/upload/avtor/2.jpg" onclick="setAvt(this,2)" />
        <img src="/static/upload/avtor/3.jpg" onclick="setAvt(this,3)" />
        <img src="/static/upload/avtor/4.jpg" onclick="setAvt(this,4)" />
        <img src="/static/upload/avtor/5.jpg" onclick="setAvt(this,5)" />
        <img src="/static/upload/avtor/6.jpg" onclick="setAvt(this,6)" />
        <img src="/static/upload/avtor/7.jpg" onclick="setAvt(this,7)" />
        <img src="/static/upload/avtor/8.jpg" onclick="setAvt(this,8)" />
        <img src="/static/upload/avtor/9.jpg" onclick="setAvt(this,9)" />
        <img src="/static/upload/avtor/10.jpg" onclick="setAvt(this,10)" />
        <img src="/static/upload/avtor/11.jpg" onclick="setAvt(this,11)" />
        <img src="/static/upload/avtor/12.jpg" onclick="setAvt(this,12)" />
      </div>
      <div class="sendc"> 
        <a class="rcls" href="javascript:clsAvt()">关闭</a>
      </div> 
    </div>
  </div>
  <div class="rzz" id="rzz">
    <div class="rea box">
      <div class="reat">
        <h1 id="rwork"></h1>
      </div>
      <div class="comme">
       <div class="namee">  
        <div class="nxinfo"> 
         <div class="nipt"> 
          <p>昵称</p> 
          <input id="rname" type="text" placeholder="*必填,请输入您的昵称" /> 
         </div> 
         <div class="nipt"> 
          <p>邮箱</p> 
          <input id="remail" type="text" placeholder="推荐选填,请输入您的电子邮箱" /> 
         </div> 
         <div class="nipt"> 
          <p>QQ</p> 
          <input id="rqq" type="text" placeholder="选填,请输入您的联系QQ" /> 
         </div> 
         <div class="nipt"> 
          <p>网址</p> 
          <input id="rurl" type="text" placeholder="选填,请输入您的个人主页地址" /> 
         </div> 
        </div> 
       </div> 
       <div class="ctxe"> 
        <textarea id="rcoms" name="rcoms" placeholder="*必填,请输入您的精彩观点"></textarea> 
       </div> 
       <div class="sendc"> 
        <a class="rcls" href="javascript:clsComms()">取消</a> 
        <a id="repMethod" class="bgl" href="#">回复观点</a> 
       </div> 
      </div> 
    </div>
  </div>
  <div class="rzz" id="chelp">
    <div class="rea box chelp">
      <div class="reat">
        <h1>评论提示</h1>
      </div>
      <div class="helpe">
        <ul>
          <li>头像：系统为您提供了12个头像自由选择，初次打开随机为你选择一个</li>
          <li>邮箱：可选提交邮箱，该信息不会外泄，或将上线管理员回复邮件通知</li>
          <li>网址：可选提交网址，评论区该地址将以外链的形式展示在您的昵称上</li>
          <li>记忆：浏览器将记忆您已选择或填写过得信息，下次评论无需重复输入</li>
          <li>审核：提供一个和谐友善的评论环境，本站所有评论需要经过人工审核</li>
        </ul>
      </div>
      <div class="sendc">
       <a class="bgl" href="javascript:clsHelpComms()">了解</a> 
      </div>
    </div>
  </div>
    </div> 
  <script type="text/javascript">
    var pid = 1032;  </script>
  <script src="http://blog.mebugs.com/static/js/base.js?v=1.0"></script> 
         <script src="http://blog.mebugs.com/static/lib/jquery/jquery-3.6.0.min.js?v=1.0"></script>
   <script src="http://blog.mebugs.com/static/js/popup.js?v=1.0"></script>  
   <script src="http://blog.mebugs.com/static/js/post.js?v=1.0"></script> 
   <script src="http://blog.mebugs.com/static/js/mark.js?v=1.0"></script> 
       </body>
</html>